<!--
 * @Author: coocase
 * @Date: 2021-04-07 14:48:42
 * @LastEditTime: 2021-05-13 14:06:35
 * @LastEditors: coocase
 * @Description: 列表显示
 * @FilePath: \git\dami\src\pages\result\resultList.vue
-->
<template>
    <div class="list">
        <Card
            class="item"
            v-for="data in pages.pageData"
            :key="data.name"
            :bordered="false"
            @click.native="$toDetail(data.title)"
        >
            <div
                class="item-img"
                :style="{ 'background-color': data.imgUrl }"
            ></div>
            <div class="item-info">
                <p class="item-title">{{ data.title }}</p>
                <p class="item-itemName">
                    <Icon type="ios-bookmarks" color="#ff3c1b" size="16" />
                    {{ data.name }}
                </p>
                <p class="item-locate">
                    <Icon type="ios-locate-outline" color="#ff3c1b" size="16" />
                    {{ data.address }}
                </p>
                <p class="item-date">
                    <Icon type="md-calendar" color="#ff3c1b" size="16" />
                    {{ data.date }}
                </p>
                <p class="item-price">
                    <Icon type="md-qr-scanner" color="#ff3c1b" size="16" />
                    票价： ￥{{ data.unitPrice }}
                </p>
            </div>
        </Card>
        <Page
            :total="pages.pageTotal"
            :page-size="pages.pageSize"
            @on-change="pageChange"
            :current="1"
            class="page"
        />
    </div>
</template>

<script>
export default {
    name: "ResultList",
    props: ["results"],
    data() {
        return {
            datas: "",
            //初始化信息
            pages: {
                pageNum: 1,
                pageTotal: 10,
                pageSize: 6,
                pageData: [],
            },
            Initialized:false
        };
    },
    methods: {
        initPage: function () {
                // console.log("results存在");
                // console.log(this.results);
                if(this.results){
                    this.datas = this.results;
                    this.pages.pageTotal = this.datas.pages.length * 6;
                    this.pages.pageData = Array.from(this.datas.pages[0].datas);
                }else{
                    this.$http.getRequest({
                    api:'results',
                    data:{}
                }).then((res) => {
                    // console.log("刷新数据：");
                    // console.log(res.pages[0].datas[0].title);
                    this.datas = res;
                    this.pages.pageTotal = this.datas.pages.length * 6;
                    this.pages.pageData = Array.from(this.datas.pages[0].datas);
                    //获取数据再跳转，否则第一次渲染不出数据
                   
                    //   console.log(res);
                }).catch((err) => {
                    console.log(err)
                });
                }
                
        },
        scrollto: function () {
            window.scrollTo({
                top: 0,
                behavior: "smooth",
            });
        },
        pageChange(i) {
            this.pages.pageNum = i;
            this.pages.pageSize = this.datas.pages[i - 1].datas.length;
            this.pages.pageData = this.datas.pages[i - 1].datas;
            this.scrollto();
        },
        goDetail: function () {
            this.$toDetail();
        },
    },
    // created:function () {  
    //     console.log("created");
    // },    
    // beforeMount: function () {
    //         console.log("beforeMount");

    // },
    mounted: function () {
            // console.log("init");
             this.initPage();
        
    },
};
</script>

<style scoped>
.item {
    height: 240px;
    margin-bottom: 10px;
    border-bottom: solid 1px #eee;
}
.item:hover {
    cursor: pointer;
}
.item-img {
    display: inline-block;
    width: 150px;
    height: 200px;
    border: none;
    background-color: rgb(67, 69, 204);
}
.item-info {
    display: inline-block;
}

.item-itemName,
.item-price,
.item-date,
.item-locate,
.item-title {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 10px;
    font-size: 12px;
}
.item-title {
    font-size: 16px;
    font: bolder;
    margin-bottom: 50px;
}
.page{
    align-items: center;
}
</style>